<template>
    <view class="list-card-wrapper">
        <view class="header" :style="{ background: `linear-gradient(90deg, ${changeBgColor} 0%, #FFFFFF 100%)` }">
            <image :src="imgUrl" mode="widthFix"></image>
            <view class="title">{{ title }}</view>
        </view>
        <view class="content">
            <view v-for="item in list" :key="item.text" class="content-item">
                <view class="text">{{ item.text }}</view>
                <view class="value">{{ item.value }}</view>
            </view>
            <view class="h-line"></view>
            <view class="v-line" :class="{ 'v-line-half': isHalf }"></view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: "",
        },
        changeBgColor: {
            type: String,
            default: "#FFF9EA",
        },
        imgUrl: {
            type: String,
            default: "",
        },
        list: {
            type: Array,
            default: () => [],
        },
        isHalf: {
            type: Boolean,
            default: false,
        },
    },
}
</script>

<style lang="scss">
.list-card-wrapper {
    background-color: $color-white;
    border-radius: 24rpx;
    overflow-y: auto;

    .header {
        display: flex;
        align-items: center;
        height: 96rpx;
        padding-left: 32rpx;

        image {
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
        }

        .title {
            margin-left: 12rpx;
            color: $color-gray-1;
            font-size: 32rpx;
            font-weight: 700;
        }
    }

    .content {
        position: relative;
        display: flex;
        flex-wrap: wrap;

        .content-item {
            width: 50%;
            height: 156rpx;
            padding-left: 32rpx;
            padding-top: 32rpx;
            box-sizing: border-box;

            .text {
                margin-bottom: 6rpx;
                color: $color-gray-2;
                font-size: 28rpx;
            }

            .value {
                color: $color-gray-1;
                font-size: 40rpx;
                font-weight: 700;
            }
        }

        .h-line {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
            height: 1rpx;
            background-color: $border;
        }

        .v-line {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 1rpx;
            height: 100%;
            background-color: $border;
        }

        .v-line-half {
            height: 50%;
            bottom: 0;
        }
    }
}
</style>
